<template>
	<div id="newSemester">
		<div class="breadcrumb">
			<span>{{actionText}}</span>
			<span @click="cancel" class="turnOff">关闭</span>
		</div>

		<div class="list">
			<div class="list_head">
				<span class="head_name">学期信息</span>
				<el-button class="save" type="primary" @click="save()">保存</el-button>
				<!-- <el-button class="cancel" type="primary" @click="cancel()">返回</el-button> -->
			</div>
			<div class="tips">提示：随意修改学期起止时间会造成相关数据异常。望各位老师慎重修改！</div>
			<el-form ref="semesterForm" :model="semesterForm" :rules="rules" label-width="85px">
				<el-form-item label="学期名称:" prop="name">
					<el-input v-model="semesterForm.name" class="el-input"></el-input>
				</el-form-item>

				<el-form-item label="学期时间:" required>
					<el-form-item prop="startTime" class="time">
						<el-date-picker v-model="semesterForm.startTime" format="yyyy/MM/dd" placeholder="yyyy/MM/dd" class="qizhiDate"></el-date-picker>
					</el-form-item>
					至
					<el-form-item prop="endTime" class="time">
						<el-date-picker v-model="semesterForm.endTime" class="qizhiDate" format="yyyy/MM/dd" placeholder="yyyy/MM/dd"></el-date-picker>
					</el-form-item>
				</el-form-item>
			</el-form>
		</div>
		<v-footer></v-footer>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";
	import vFooter from "../../common/Footer.vue";

	export default {
		data() {
			let checkStartTime = (rule, value, callback) => {
				if (value) {
					let startTime = new Date(this.semesterForm.startTime).getTime();
					let endTime = new Date(this.semesterForm.endTime).getTime();
					if (startTime > endTime) {
						callback(new Error("请正确填写学期开始时间"));
					} else {
						callback();
					}
				} else {
					callback(new Error("请输入学期开始时间"));
				}
			};
			let checkEndTime = (rule, value, callback) => {
				if (value) {
					let startTime = new Date(this.semesterForm.startTime).getTime();
					let endTime = new Date(this.semesterForm.endTime).getTime();
					if (startTime > endTime) {
						callback(new Error("请正确填写学期结束时间"));
					} else {
						callback();
					}
				} else {
					callback(new Error("请输入学期结束时间"));
				}
			};
			return {
				sid: "",
				semesterForm: {
					name: "",
					endTime: "",
					startTime: ""
				},
				actionText: "新增学期",
				rules: {
					name: [
						{ required: true, message: "请输入学期名称", trigger: "blur" },
						{ min: 1, max: 20, message: "不超过20个字符", trigger: "blur" }
					],
					startTime: [
						{
							type: "date",
							required: true,
							message: "请输入学期开始时间",
							trigger: "change"
						},
						{ validator: checkStartTime },
						{ validator: checkEndTime }
					],
					endTime: [
						{
							type: "date",
							required: true,
							message: "请输入学期结束时间",
							trigger: "change"
						},
						{ validator: checkStartTime },
						{ validator: checkEndTime }
					]
				}
			};
		},
		components: { vFooter },
		mounted() {
			this.sid = this.$util.getUrlParam("sid");
			if (this.sid) {
				this.actionText = "编辑学期";
				this.getSemesterDetail();
			}
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			save() {
				let url = this.$util.domain + "/campusadminapi/v1/semester/save";

				this.$refs.semesterForm.validate(valid => {
					if (valid) {
						this.$http({
							url,
							method: "POST",
							body: JSON.stringify({
								name: this.semesterForm.name,
								sid: parseInt(this.sid) || null,
								startDate: new Date(this.semesterForm.startTime).getTime(),
								endDate: new Date(new Date(this.semesterForm.endTime).format("yyyy/MM/dd 23:59:59")).getTime()
							})
						}).then(response => {
							if (response.data.error == 10000) {
								this.$util.successMsg("操作成功");
								location.href = "/#/semesterManage";
							} else {
								this.$util.errorMsg(response.data.message);
							}
						}, (response) => {
							this.$util.errorMsg(response.data.message);
						});
					}
				});
			},
			cancel() {
				location.href = "/#/semesterManage";
			},
			// 获取学期详情
			getSemesterDetail() {
				let url = this.$util.domain + "/campusadminapi/v1/semester/detail";
				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						sid: this.sid * 1
					})
				}).then(response => {
					if (response.data.error == 10000) {
						let dataObj = response.data.data;
						this.semesterForm = {
							name: dataObj.name,
							startTime: new Date(dataObj.startTime),
							endTime: new Date(dataObj.endTime)
						};
					} else {
						this.$util.errorMsg(response.data.message);
					}
				}, (response) => {
					this.$util.errorMsg(response.data.message);
				});
			}
		}
	};
</script>

<style scoped>
	#newSemester {
		padding-top: 60px;
		height: calc(100% - 100px);
		background: #F7F7F8;
	}

	#newSemester .breadcrumb {
		background: #2d3243;
		color: #ffffff;
		top: 0;
	}

	#newSemester .list {
		width: 80%;
		margin-left: 10%;
		margin-top: 20px;
		height: calc(100% - 140px);
	}

	#newSemester .turnOff {
		position: absolute;
		right: 100px;
	}

	.title {
		color: #0398ff;
	}

	.tips {
		color: red;
		font-size: 12px;
		margin-bottom: 15px;
	}

	#newSemester .el-input {
		display: inline-block;
		width: 40%;
	}

	.time {
		display: inline-block;
		width: 15%;
		min-width: 150px;
	}

	#newSemester .save {
		right: 0;
	}

	#newSemester .qizhiDate {
		display: inline-block;
		width: 100%;
	}
</style>